.m-calendar
  .calendar
    background: rgba(244,240,225,0.5);
    margin-bottom: 15px
    .header
      border-bottom: 1px solid #ece8d7;
      overflow: hidden;
      padding: 15px 15px
      .header-item
        float: left;
        text-align: center;
        &.year
          width: 30%
        &.month
          width: 30%
        &.time
          width: 40%
        select 
          overflow: hidden;
          border-radius: 0;
          border: 1px solid #dbd9d2;
          padding: 5px 15px;
          width: 80%;
          background: transparent;
    .day-wrap
      overflow: hidden;
      padding: 10px 0;
      border-bottom: 1px solid #ece8d7;
      li
        float: left
        width: 14.2%
        text-align: center
    .date-wrap
      overflow: hidden
      li
        float: left;
        width: 14.2%;
        text-align: center;
        padding: 5px 0;
        cursor: pointer
        p
         line-height: 20px
        &.active
          background-image: url(../images/calendar/active.png)
          background-repeat: no-repeat;
          background-position: center top;
          color: #fff;
          background-size: contain;

  .date-info
    text-align: center;
    padding: 15px;
    background: rgba(244,240,225,0.5);
    margin-bottom: 15px
    .big-date
      margin: auto
      font-size: 70px;
      color: #fff;
      background: #e0513e;
      height: 100px;
      line-height: 100px;
      width: 110px;

  .avoid-info
    background: rgba(244,240,225,0.5);
    padding: 15px;
    margin-bottom: 15px
    .title
      font-size: 16px;
      margin-bottom: 10px;
      color: #416a8d
    .red
      color: $red
    .green
      color: $green

  .info-block
    padding: 15px;
    background: rgba(243,233,207,0.5);
    margin-bottom: 15px
    .title
      margin-bottom: 10px
